<template>
  <div class="snow-page">
    <div class="snow-inner-page">
      <a-form :model="formData.form" :label-col-props="{ span: 5 }" :wrapper-col-props="{ span: 18 }" ref="formRef">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item field="name" label="名称">
              <a-input v-model="formData.form.name" placeholder="请输入名称" allow-clear />
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-space>
              <a-button type="primary" @click="onSearch">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="onReset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
              <!-- <a-button type="primary" @click="onAdd">
                <template #icon>
                  <icon-PlusOutlined />
                </template>
                <template #default>新增</template>
              </a-button> -->
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-table :data="tableData" row-key="id" size="small" bordered :pagination="false">
        <template #columns>
          <a-table-column title="序号">
            <template #cell="{ record }">
              {{ record.id }}
            </template>
          </a-table-column>
          <a-table-column title="名称">
            <template #cell="{ record }">
              {{ record.name }}
            </template>
          </a-table-column>

          <a-table-column title="分类">
            <template #cell="{ record }">
              {{ record.dictionary_name }}
            </template>
          </a-table-column>

          <a-table-column title="code">
            <template #cell="{ record }">
              {{ record.code }}
            </template>
          </a-table-column>
          <a-table-column title="父类">
            <template #cell="{ record }">
              {{ record.p_dictionary_name }}
            </template>
          </a-table-column>

          <a-table-column title="父code">
            <template #cell="{ record }">
              {{ record.p_code }}
            </template>
          </a-table-column>

          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-space>
                <!-- <a-button size="mini" type="primary" @click="onEdit(record)">修改</a-button> -->


                <a-button size="mini" type="primary" status="danger" @click="onDelete2(record)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <a-pagination :total="total" style="margin-top:10px;" @change="changePage" />
    </div>

    <a-modal v-model:visible="visible" :footer="false" width="30%">
      <template #title>
        增加/编辑数据字典
      </template>
      <div>
        <a-form ref="formRef" :model="form" auto-label-width @submit="handleSubmit">

          <a-form-item field="name" label="名称" :rules="[{ required: true, message: '名称不能为空' }]">
            <a-input v-model="form.name" placeholder="名称" allow-clear />
          </a-form-item>
          <a-form-item field="dictionary_name" label="分类名" :rules="[{ required: true, message: '分类名不能为空' }]">
            <a-input v-model="form.dictionary_name" placeholder="分类名" allow-clear />
          </a-form-item>
          <a-form-item field="valuety" label="数值">
            <a-input v-model="form.valuety" placeholder="没有不填" allow-clear />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">确定</a-button>
            <a-button @click="visible = false">取消</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
// import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
// import dynamicRoutes from "@/mock/_data/system_menu";
import { Modal, Message } from "@arco-design/web-vue";
import { getDictAPI, addDictAPI, updateDictAPI, deleteDictAPI } from "@/api/modules/dictionary/index";
import { onMounted, reactive } from "vue";

onMounted(() => {
  init();
});
const form = reactive({
  p_code: "",
  p_dictionary_name: ""
}) as any;

const visible = ref(false)
const total = ref(0)
async function init() {
  let res = await getDictAPI(formData.paged, formData.form);
  if (res.status == 2) {
    total.value = res.data.totalCount
    tableData.value = res.data.data;
  } else {
    tableData.value = [];
  }
}

const handleSubmit = async (values, errors) => {
  console.log(values);
  values.value['value'] = form.valuety
  if (errors) {
    return
  }

  if (form.id) {
    let res = await updateDictAPI(values.value) as any;
    if (res.status == 2) {
      Message.success("操作成功");
    } else {
      Message.error(res.statusMsg);
    }
  } else {
    let res = await addDictAPI(values.value) as any;
    if (res.status == 2) {
      Message.success("操作成功");
    } else {
      Message.error(res.statusMsg);
    }
  }
  init();
  visible.value = false

}

const tableData = ref([]);
const formData = reactive({
  form: {
    name: ""
  },
  paged: 1
});

const formRef = ref();
const onReset = () => {
  formRef.value.resetFields();
  init();
};

async function onSearch() {
  init();
}

function changePage(page) {

  formData.paged = page;
  init()
}


// function onAdd() {
//   visible.value = true
// }

// const onEdit = (row: any) => {
//   form.name = row.name
//   form.dictionary_name = row.dictionary_name
//   form.value = row.value
//   form.id = row.id
//   visible.value = true
// };

const onDelete2 = (row: any) => {
  Modal.warning({
    title: "提示",
    content: "确定删除？",
    hideCancel: false,
    closable: true,
    onOk: async () => {
      try {
        let res = (await deleteDictAPI(row.id)) as any;
        if (res.status == 2) {
          Message.success("删除成功");
        } else {
          Message.error(res.statusMsg);
        }
        init();
      } catch { }
    }
  });
};
</script>

<style lang="scss">
.arco-modal-body {
  text-align: center !important;
}

::v-deep .arco-table-size-small .arco-table-thead .arco-table-cell {
  padding: 2px 16px !important;
  text-align: center !important;
}
</style>
